<template>
  <div class="search">
    <navbar @back="back" title="面经搜索"></navbar>
    <!-- 搜索框 -->
    <form action="/">
      <van-search
        v-model="value"
        shape="round"
        show-action
        placeholder="请输入搜索关键词"
        @search="getSearch"
        @cancel="onCancel"
      />
    </form>
    <div v-if="isShowHot">
      <!-- 大家都在搜 -->
      <div class="hot-search">
        <van-cell>
          <template #title>
            <h3>大家都在搜索</h3>
          </template>
        </van-cell>
        <div class="tags">
          <div
            class="tag"
            v-for="(item, index) in hotSearchList"
            :key="index"
            @click="getSearch(item)"
          >
            {{ item }}
          </div>
        </div>
      </div>
      <!-- 历史记录 -->
      <div class="hot-search">
        <van-cell>
          <template #title>
            <h3>历史记录</h3>
          </template>
          <template #default>
            <span>清除</span>
          </template>
        </van-cell>
        <div class="tags">
          <div
            class="tag"
            v-for="(item, index) in histroyList"
            :key="index"
            @click="getSearch(item)"
          >
            {{ item }}
          </div>
        </div>
      </div>
    </div>
    <!-- 显示数据区域 -->
    <div class="show-data" v-else>
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <shareList
          :item="item"
          v-for="(item, index) in showList"
          :key="index"
        ></shareList>
      </van-list>
    </div>
  </div>
</template>

<script>
import { getHotSearch, getShare } from '../../../api/articles.js'
import { getHistory, setHistory } from '../../../utils/token.js'
export default {
  name: 'search',
  data () {
    return {
      histroyList: [],
      hotSearchList: [],
      isShowHot: true,
      value: '',
      loading: false,
      finished: false,
      showList: [],
      start: -5,
      limit: 5,
      total: 0
    }
  },
  methods: {
    // 点击获取数据
    getSearch (item) {
      // 赋值value
      this.value = item
      // 隐藏isShow
      this.isShowHot = false
      // 获取并保存搜索历史数据
      this.histroyList.unshift(item)
      // 存入localstorage中
      setHistory(JSON.stringify(this.histroyList))
      // 数据排序,去重,限长
      this.histroyList = [...new Set(this.histroyList)]
    },
    // 当下拉或者加载组件时触发onLoad事件
    async onLoad () {
      // 根据下标请求数据
      this.start += this.limit
      const res = await getShare({
        start: this.start,
        limit: this.limit,
        q: this.value
      })
      // 拼接保存数据
      //   console.log(this.value)
      //   console.log(res.data.data.list[0].title)
      res.data.data.list.forEach(item => {
        item.title = item.title.replace(
          this.value,
          `<span style="color:red">${this.value}</span>`
        )
      })
      this.showList.push(...res.data.data.list)
      this.total = res.data.data.total
      // 关闭加载状态
      this.loading = false
      // 判断数据是否加载完毕
      if (this.showList.length >= this.total) {
        this.finished = true
      }
    },
    onCancel () {
      this.isShowHot = true
      this.isShowHot = true
      this.value = ''
      this.loading = false
      this.finished = false
      this.showList = []
      this.start = -5
      this.total = 0
    },
    back () {
      this.$router.back()
    }
  },
  async created () {
    const res = await getHotSearch()
    this.hotSearchList = res.data.data
    this.histroyList = JSON.parse(getHistory())
    this.histroyList.splice(5)
    // console.log(this.histroyList.length)
  }
}
</script>

<style lang="less" scoped>
.search {
  .hot-search {
    margin-bottom: 10px;
    h3 {
      font-size: 18px;
      font-weight: 500;
      margin: 0;
    }
    .tags {
      padding: 10px 15px;
      display: flex;
      font-size: 14px;
      flex-wrap: wrap;
      .tag {
        background-color: #eeebec;
        margin-right: 12px;
        padding: 4px 6px;
      }
    }
  }
  .show-data {
    padding: 0 15px;
  }
}
</style>
